<template>
  <view class="dish-item flex">
    <view class="dish-item-left">
      <wd-img
        :width="itemInfo.width || 102"
        :height="itemInfo.width || 102"
        :src="itemInfo.url"
        :enable-preview="true"
        round
      >
        <template #loading v-if="!itemInfo.url">
          <view class="error-wrap flex-center">加载失败</view>
        </template>
      </wd-img>
    </view>
    <view class="dish-item-right ml-32">
      <view class="right-info flex-column">
        <view class="dish-name">{{ itemInfo.name }}</view>
        <view class="order-time flex-column">
          <view
            >本月已点<span class="month-time num">{{ itemInfo.monthTime }}</span
            >次</view
          >
          <view class="total-time flex-column-center">
            <span
              >累计已点<span class="num">{{ itemInfo.totalTime }}</span
              >次</span
            >
          </view>

          <view class="rank" v-if="itemInfo.rank">
            <wd-img
              :width="24"
              :height="24"
              :src="staticImgUrl[itemInfo.rank]"
            />
          </view>
        </view>
        <view class="method flex-column-center">
          <wd-img :width="24" :height="24" :src="method" @click="gotoMethod" />

          <view class="slot-class">
            <slot name="rightSlot"></slot>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import tab from "../../utils/tab";
import method from "../../static/images/method.svg";

const props = defineProps({
  itemInfo: {
    type: Object,
    default: () => ({}),
  },
});

const staticImgUrl = {
  1: "",
  2: "",
  3: "//lf3-fe.ecombdstatic.com/obj/ecom-cdn-default/cmp/ecom/strategy-market/static/svg/rank_3.017c35ec.svg",
};

const gotoMethod = () => {
  tab.navigateTo(`method?id=${props.itemInfo.id}`);
};
</script>

<style scoped lang="scss">
.error-wrap {
  width: 100%;
  height: 100%;
  background-color: $main-color;
  color: white;
}

.dish-item {
  width: 100%;
  position: relative;

  &-right {
    flex: 1;

    .right-info {
      height: 100%;
      justify-content: space-between;
      font-size: 28rpx;
      letter-spacing: 1px;

      .dish-name {
        font-weight: bold;
        font-size: 36rpx;
      }

      .order-time {
        position: relative;
        font-size: 24rpx;
        color: $text-shallow-color;

        .num {
          color: #f22;
          margin: 0 8rpx;
        }

        .month-time {
          color: rgb(69, 228, 130);
        }

        .rank {
          position: absolute;
          right: 0;
          top: 0;
        }
      }

      .method {
        justify-content: space-between;
      }
    }
  }
}
</style>
